import ComponentCodePreview from "@/components/app/component-code-preview"
import { generateMetadata } from "../utils/metadata"
import { ToolBasic } from "./tool-basic"
import { ToolStates } from "./tool-states"

export const metadata = generateMetadata(
  "Tool",
  "Displays tool call details including input, output, status, and errors. Ideal for visualizing AI tool usage in chat UIs."
)

# Tool

Displays tool call details including input, output, status, and errors. Ideal for visualizing AI tool usage in chat UIs. **Compatible with AI SDK v5** architecture.

## Examples

### Basic Tool

<ComponentCodePreview
  component={<ToolBasic />}
  filePath="app/docs/tool/tool-basic.tsx"
  classNameComponentContainer="p-8"
/>

### Tool States

Show different states of tool execution: pending, running, completed, and error.

<ComponentCodePreview
  component={<ToolStates />}
  filePath="app/docs/tool/tool-states.tsx"
  classNameComponentContainer="p-8"
/>

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>

<TabsContent value="cli">

<CodeBlock
  code={`npx shadcn add "https://prompt-kit.com/c/tool.json"`}
  language="bash"
/>

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<CodeBlock filePath="components/prompt-kit/tool.tsx" language="tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Component API

### Tool

| Prop        | Type     | Default | Description                                      |
| :---------- | :------- | :------ | :----------------------------------------------- |
| toolPart    | ToolPart |         | The tool invocation data to display              |
| defaultOpen | boolean  | false   | Whether the tool details are expanded by default |
| className   | string   |         | Additional CSS classes                           |

### ToolPart

| Prop       | Type                      | Default | Description                                  |
| :--------- | :------------------------ | :------ | :------------------------------------------- |
| type       | string                    |         | The type of the tool                         |
| state      | string                    |         | The state of the tool                        |
| input      | `Record<string, unknown>` |         | The input data to the tool                   |
| output     | `Record<string, unknown>` |         | The output data from the tool                |
| toolCallId | string                    |         | The tool call identifier                     |
| errorText  | string                    |         | The error text if the tool failed to execute |
